<!DOCTYPE html>
<html>
<head>
<?php include_once VIEWS.'inc/head.php'; ?>
<?php
	echo static_file('web/css/swiper2.css');
	echo static_file('web/js/swiper2.min.js');
	echo static_file('web/css/flexslider.css');
	echo static_file('web/css/owl.carousel2.css');
	echo static_file('web/js/owl.carousel.js');
	echo static_file('web/js/jquery.flexslider-min.js');
	echo static_file('web/js/jquery.lazyload.min.js');
	echo static_file('web/css/jquery.mCustomScrollbar.css');
	echo static_file('web/js/jquery.mCustomScrollbar.js');
?>
</head>

<body>
	<div class="main">
		<?php include_once VIEWS.'inc/header.php'; ?>
		<section class="hot">
			<div class="detail">
				<div class="detail_top">
					<div class="detail_top_cen w1440 f-cb">
						<div class="prev"></div>
						<div class="next"></div>
						<div class="swiper-container pro_swiper f-cb">
							<div class="swiper-wrapper">
								<div class="swiper-slide f-cb auto">
									<div class="swiper_left">
										<div class="swiper-container swiper-container1">
											<div class="swiper-wrapper">
												<div class="swiper-slide">
													<img src="<?php echo static_file('web/img/img.png')?>" alt="">
												</div>
												<div class="swiper-slide">
													<img src="<?php echo static_file('web/img/img.png')?>" alt="">
												</div>
												<div class="swiper-slide">
													<img src="<?php echo static_file('web/img/img.png')?>" alt="">
												</div>
												<div class="swiper-slide">
													<img src="<?php echo static_file('web/img/img.png')?>" alt="">
												</div>
											</div>
											<div class="pagination"></div>
										</div>
									</div>
									<div class="text_box">
										<div class="t">淋浴屏集成热水机</div>
										<div class="ds">时尚黑科技</div>
										<div class="money"><span>¥</span>9978.00</div>
										<div class="choose">
											<div class="text">选择颜色</div>
											<div class="choose_box choose_box1">
												<ul class="f-cb">
													<li class="active">
														<div class="pic">
															<img src="<?php echo static_file('web/img/js.png')?>" alt="">
														</div>
														<div class="color">金色</div>
													</li>
													<li>
														<div class="pic">
															<img src="<?php echo static_file('web/img/ys.png')?>" alt="">
														</div>
														<div class="color">银色</div>
													</li>
													<li>
														<div class="pic">
															<img src="<?php echo static_file('web/img/bls.png')?>" alt="">
														</div>
														<div class="color">宝蓝色</div>
													</li>
													<li>
														<div class="pic">
															<img src="<?php echo static_file('web/img/mg.png')?>" alt="">
														</div>
														<div class="color">玫瑰金</div>
													</li>
												</ul>
											</div>
										</div>

										<div class="specifications">
											<div class="text">规       格</div>
											<div class="box">
												<ul class="f-cb">
													<li class="active">
														50升
													</li>
													<li>
														60升
													</li>
													<li>
														70升
													</li>
												</ul>
											</div>
										</div>

										<a href="http://www.baidu.com" target="_blank" class="buy">立即购买</a>
									</div>
								</div>
								<div class="swiper-slide f-cb auto">
									<div class="swiper_left swiper_left2">
										<div class="swiper-container swiper-container2">
											<div class="swiper-wrapper">
												<div class="swiper-slide">
													<img src="<?php echo static_file('web/img/img.png')?>" alt="">
												</div>
												<div class="swiper-slide">
													<img src="<?php echo static_file('web/img/img.png')?>" alt="">
												</div>
												<div class="swiper-slide">
													<img src="<?php echo static_file('web/img/img.png')?>" alt="">
												</div>
												<div class="swiper-slide">
													<img src="<?php echo static_file('web/img/img.png')?>" alt="">
												</div>
											</div>
											<div class="pagination"></div>
										</div>
									</div>
									<div class="text_box">
										<div class="t">淋浴屏集成热水机</div>
										<div class="ds">时尚黑科技</div>
										<div class="money"><span>¥</span>9978.00</div>
										<div class="choose">
											<div class="text">选择颜色</div>
											<div class="choose_box choose_box2">
												<ul class="f-cb">
													<li class="active">
														<div class="pic">
															<img src="<?php echo static_file('web/img/js.png')?>" alt="">
														</div>
														<div class="color">金色</div>
													</li>
													<li>
														<div class="pic">
															<img src="<?php echo static_file('web/img/ys.png')?>" alt="">
														</div>
														<div class="color">银色</div>
													</li>
													<li>
														<div class="pic">
															<img src="<?php echo static_file('web/img/bls.png')?>" alt="">
														</div>
														<div class="color">宝蓝色</div>
													</li>
													<li>
														<div class="pic">
															<img src="<?php echo static_file('web/img/mg.png')?>" alt="">
														</div>
														<div class="color">玫瑰金</div>
													</li>
												</ul>
											</div>
										</div>

										<div class="specifications">
											<div class="text">规       格</div>
											<div class="box">
												<ul class="f-cb">
													<li class="active">
														50升
													</li>
													<li>
														60升
													</li>
													<li>
														70升
													</li>
												</ul>
											</div>
										</div>

										<a href="http://www.baidu.com" target="_blank" class="buy">立即购买</a>
									</div>
								</div>
							</div>
						</div>
					</div>
					
				</div>
				<div class="pd">
					<div class="position">
						<div class="position_cen w1440 f-cb">
							<div class="nav_l">
								<a href="javascript:;" data-id="#id1" class="active"><span>产品简介</span></a>
								<a href="javascript:;" data-id="#id2"><span>规格参数</span></a>
								<a href="javascript:;" data-id="#id3"><span>售后服务</span></a>                        
							</div>
							<div class="position_r">
								<a href="<?php echo site_url('welcome'); ?>">首页</a> > <a href="<?php echo site_url('hwliving'); ?>">热水生活馆</a>> <a href="<?php echo site_url('hwliving/list'); ?>">集成热水机 </a>>  <span>豪华淋浴屏一体式</span>
							</div>
						</div>
					</div>
					<div class="dbox w1440 wow fadeInUp" id="id1">
						<div class="pic_box">
							<p><img src="<?php echo static_file('web/img/pd1.jpg')?>" alt=""></p>
							<p><img src="<?php echo static_file('web/img/pd2.jpg')?>" alt=""></p>
							<p><img src="<?php echo static_file('web/img/pd3.jpg')?>" alt=""></p>
							<p><img src="<?php echo static_file('web/img/pd4.jpg')?>" alt=""></p>
							<p><img src="<?php echo static_file('web/img/pd5.jpg')?>" alt=""></p>
							<p><img src="<?php echo static_file('web/img/pd6.jpg')?>" alt=""></p>
							<p><img src="<?php echo static_file('web/img/pd7.jpg')?>" alt=""></p>
							<p><img src="<?php echo static_file('web/img/pd8.jpg')?>" alt=""></p>
							<p><img src="<?php echo static_file('web/img/pd9.jpg')?>" alt=""></p>
							<p><img src="<?php echo static_file('web/img/pd10.jpg')?>" alt=""></p>
							<p><img src="<?php echo static_file('web/img/pd11.jpg')?>" alt=""></p>
						</div>
					</div>

					<div class="parameter w1440 wow fadeInUp" id="id2">
						<div class="tit">
							<div class="cn">规格参数</div>
							<div class="en">Specifications</div>
						</div>
						<div class="table">
							<table>
								<tr>
									<td width="512">额定电压/频率</td>
									<td width="925">220V~/50HZ</td>
								</tr>
								<tr>
									<td>额定最大功率</td>
									<td>6.5KW、7.5KW、8.5kW</td>
								</tr>
								<tr>
									<td>自带漏保开关</td>
									<td>2P/50A</td>
								</tr>
								<tr>
									<td>最低电表要求</td>
									<td>磁卡电表15(60)A</td>
								</tr>
								<tr>
									<td>控制方式</td>
									<td>触摸彩屏、恒温、设定温度30-55℃可调，夏、冬模式记忆功能I类</td>
								</tr>
								<tr>
									<td>防触电保护类型</td>
									<td>I类</td>
									
								</tr>
								<tr>
									<td>防水等级</td>
									<td>IPX4</td>
									
								</tr>
								<tr>
									<td>额定压力（MPa)</td>
									<td>0 MPa</td>
									
								</tr>
								<tr>
									<td>磁卡电表容量(A)</td>
									<td>≥15（60）</td>
									
								</tr>
								<tr>
									<td>卫生间漏保开关(A)</td>
									<td>50A</td>
									
								</tr>
								<tr>
									<td>可调节温度</td>
									<td>30-55℃</td>
									
								</tr>
								<tr>
									<td>规格（高*宽*厚度 单位：mm）</td>
									<td>2050*220*80</td>
									
								</tr>
								<tr>
									<td>余热回收盘（长*宽*厚度 单位：mm）</td>
									<td>670*600*70</td>
								</tr>
							</table>
						</div>
					</div>

					<div class="other fafafa">
						<div class="other_cen w1440">
							<div class="tbox wow fadeInUp">
								<div class="top f-cb">
									<div class="t">相关推荐</div>
									<div class="btn_box">
										<div class="prev"></div>
										<div class="next"></div>
									</div>
								</div>
								
								<div class="item_box">	
									<a href="<?php echo site_url('hwliving/detail'); ?>" class="item">
										<div class="pic">	
											<img src="<?php echo static_file('web/img/dd1.jpg')?>" alt="">
										</div>
										<div class="cont">	
											<div class="tit">淋浴屏集成热水机L2</div>
											<div class="ds">时尚黑科技</div>
										</div>
									</a>
									<a href="<?php echo site_url('hwliving/detail'); ?>" class="item">
										<div class="pic">	
											<img src="<?php echo static_file('web/img/dd2.jpg')?>" alt="">
										</div>
										<div class="cont">	
											<div class="tit">太空能集成热水机</div>
											<div class="ds">1度电量 6倍热水</div>
										</div>
									</a>
									<a href="<?php echo site_url('hwliving/detail'); ?>" class="item">
										<div class="pic">	
											<img src="<?php echo static_file('web/img/dd3.jpg')?>" alt="">
										</div>
										<div class="cont">	
											<div class="tit">智能浴室柜</div>
											<div class="ds">美肤白科技 我的水生活</div>
										</div>
									</a>
									<a href="<?php echo site_url('hwliving/detail'); ?>" class="item">
										<div class="pic">	
											<img src="<?php echo static_file('web/img/dd3.jpg')?>" alt="">
										</div>
										<div class="cont">	
											<div class="tit">智能浴室柜</div>
											<div class="ds">美肤白科技 我的水生活</div>
										</div>
									</a>
								</div>
							</div>
							<div class="problem_box f-cb">
								<div class="problem_l wow fadeInUp">
									<div class="t"><a href="<?php echo site_url('service/problem'); ?>">常见问题</a></div>
									<div class="list">
										<ul>
											<li class="active">
												<div class="ti">
													<div class="tab">
														<div class="tab_cell">泉达管线机使用注意事项</div>
													</div>
												</div>
												<div class="con show">
													<div class="con_b">
														<p>（1）因为水压不稳定或自来水压力过大，使得热水器中的热水下不来； </p>
														<p>（2）冷水压力过大，将热水顶回热水器。首先观察热水阀门的开关是否没有开大，或把冷水阀门关小，若还是不行则可增加供水泵来加大热水出水水压，或是把热水器出水管加粗； </p>
														<p>（3）若冬季出现此现象，可能是室外管路被冻住，需要检查电伴热带是否启动或者失效； </p>
														<p>（4）检查水温水位传感器及其线路是否完好。</p>
													</div>
													
												</div>
											</li>
											<li>
												<div class="ti">
													<div class="tab">
														<div class="tab_cell">
															天气晴好时地热能热水器水温不热
														</div>
													</div>
												</div>
												<div class="con">
													<div class="con_b">
														<p>（1）因为水压不稳定或自来水压力过大，使得热水器中的热水下不来； </p>
														<p>（2）冷水压力过大，将热水顶回热水器。首先观察热水阀门的开关是否没有开大，或把冷水阀门关小，若还是不行则可增加供水泵来加大热水出水水压，或是把热水器出水管加粗； </p>
														<p>（3）若冬季出现此现象，可能是室外管路被冻住，需要检查电伴热带是否启动或者失效； </p>
														<p>（4）检查水温水位传感器及其线路是否完好。（4）检查水温水位传感器及其线路是否完好。（4）检查水温水位传感器及其线路是否完好。（4）检查水温水位传感器及其线路是否完好。（4）检查水温水位传感器及其线路是否完好。（4）检查水温水位传感器及其线路是否完好。（4）检查水温水位传感器及其线路是否完好。（4）检查水温水位传感器及其线路是否完好。（4）检查水温水位传感器及其线路是否完好。（4）检查水温水位传感器及其线路是否完好。</p>
													</div>
												</div>
											</li>
											<li>
												<div class="ti">
													<div class="tab">
														<div class="tab_cell">
															反渗透净水机使用注意事项
														</div>
													</div>
												</div>
												<div class="con">
													<div class="con_b">
														<p>（1）因为水压不稳定或自来水压力过大，使得热水器中的热水下不来； </p>
														<p>（2）冷水压力过大，将热水顶回热水器。首先观察热水阀门的开关是否没有开大，或把冷水阀门关小，若还是不行则可增加供水泵来加大热水出水水压，或是把热水器出水管加粗； </p>
														<p>（3）若冬季出现此现象，可能是室外管路被冻住，需要检查电伴热带是否启动或者失效； </p>
														<p>（4）检查水温水位传感器及其线路是否完好。（4）检查水温水位传感器及其线路是否完好。（4）检查水温水位传感器及其线路是否完好。（4）检查水温水位传感器及其线路是否完好。（4）检查水温水位传感器及其线路是否完好。（4）检查水温水位传感器及其线路是否完好。（4）检查水温水位传感器及其线路是否完好。（4）检查水温水位传感器及其线路是否完好。（4）检查水温水位传感器及其线路是否完好。（4）检查水温水位传感器及其线路是否完好。</p>
													</div>
												</div>
											</li>
											<li>
												<div class="ti">
													<div class="tab">
														<div class="tab_cell">
															地热能热水器水温在洗浴过程中不稳定，时冷时热，导致热水浪费在调节水温上
														</div>
													</div>
												</div>
												<div class="con">
													<div class="con_b">
														<p>（1）因为水压不稳定或自来水压力过大，使得热水器中的热水下不来； </p>
														<p>（2）冷水压力过大，将热水顶回热水器。首先观察热水阀门的开关是否没有开大，或把冷水阀门关小，若还是不行则可增加供水泵来加大热水出水水压，或是把热水器出水管加粗； </p>
														<p>（3）若冬季出现此现象，可能是室外管路被冻住，需要检查电伴热带是否启动或者失效； </p>
														<p>（4）检查水温水位传感器及其线路是否完好。（4）检查水温水位传感器及其线路是否完好。（4）检查水温水位传感器及其线路是否完好。（4）检查水温水位传感器及其线路是否完好。（4）检查水温水位传感器及其线路是否完好。（4）检查水温水位传感器及其线路是否完好。（4）检查水温水位传感器及其线路是否完好。（4）检查水温水位传感器及其线路是否完好。（4）检查水温水位传感器及其线路是否完好。（4）检查水温水位传感器及其线路是否完好。</p>
													</div>
												</div>
											</li>
										</ul>
									</div>
								</div>
								<div class="links wow fadeInUp"  data-wow-delay="0.2s">
									<ul>
										<li style="background:url(<?php echo static_file('web/img/v11.jpg')?>) no-repeat center center;background-size:cover">	
											<div class="mask"></div>
											<div class="play"></div>
											<div class="txt">豪华淋浴屏操作视频</div>
										</li>
										<li  style="background:url(<?php echo static_file('web/img/v12.jpg')?>) no-repeat center center;background-size:cover">
											<div class="mask"></div>
											<div class="play"></div>
											<div class="txt">集成热水机安装指南</div>
										</li>
									</ul>
								</div>
							</div>
							<div class="service_box  wow fadeInUp" id="id3">
								<div class="ti">售后服务</div>
								<div class="box">
									<ul class="f-cb">
										<li>
											<a href="#">
												<div class="ico">
													<img src="<?php echo static_file('web/img/q.png')?>" alt="">
												</div>
												<div class="con">
													<div class="t">咨询在线客服</div>
													<div class="des">为您提供贴心服务</div>
												</div>
											</a>
										</li>
										<li>
											<a href="http://www.baidu.com" target="_blank">
												<div class="ico">
													<img src="<?php echo static_file('web/img/s1.png')?>" alt="">
												</div>
												<div class="con">
													<div class="t">用户社区</div>
													<div class="des">了解更多 ></div>
												</div>
											</a>
										</li>
										<li>
											<a href="#">
												<div class="ico">
													<img src="<?php echo static_file('web/img/add.png')?>" alt="">
												</div>
												<div class="con">
													<div class="t">附近服务网点</div>
													<div class="des">提供服务网点及地址及联系方式查询</div>
												</div>
											</a>
										</li>
										<li>
											<div class="code">
												<img src="<?php echo static_file('web/img/code.jpg')?>" alt="">
											</div>
											<div class="txt">四季沐歌服务公众号</div>
										</li>
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>

		<div class="video_bg"></div>
		<div class="js-cont"></div>
    	<?php include_once VIEWS.'inc/footer.php'; ?>
	</div>
	<script>
		$(function(){
			$('header .bocweb-nav ul li').eq(1).addClass('active');

			update();
			function update(){
				var h=$('.problem_l ul li .ti').outerHeight(true)*$('.problem_l ul li').length;
				var con_h=$('.problem_l').height()-$('.problem_l .t').outerHeight(true)-h-40-parseInt($('.problem_l .con').css('padding-bottom'));
				$('.problem_l ul li .con').css('max-height',con_h);
				

				$(window).resize(function(){
					h=$('.problem_l ul li .ti').outerHeight(true)*$('.problem_l ul li').length;
					con_h=$('.problem_l').height()-$('.problem_l .t').outerHeight(true)-h-40-parseInt($('.problem_l .con').css('padding-bottom'));
					$('.problem_l ul li .con').css('max-height',con_h);
				})
				$('.problem_l ul li .con').mCustomScrollbar({

				})


				$('.problem_l ul li .ti').click(function(){
					if($(this).parents('li').hasClass('active')){
						$(this).parents('li').removeClass('active');
						$(this).siblings('.con').slideUp();
					}else{
						$('.problem_l ul li').removeClass('active');
						$(this).parents('li').addClass('active');
						$('.problem_l ul li .con').slideUp();
						$(this).siblings('.con').slideDown(function(){
							$(this).mCustomScrollbar('update');
						});
					}
				})


				var owl=$('.item_box');
				owl.owlCarousel({
					items:3,
					margin:30,
					responsive:{
						0:{
							items:2,
							margin:10
						},
			          650:{
			              items:3,
			          }
			      }
				})


				if($('.item_box a').length>3 || $(window).width()<650 && $('.item_box a').length>2 ){
					$('.btn_box').show();
				}
				$('.btn_box .next').click(function(){
					owl.trigger('next.owl.carousel');
				})
				$('.btn_box .prev').click(function(){
					owl.trigger('prev.owl.carousel');
				})

				$('.item_box .pic').height(Math.floor($('.item_box .pic').width()*(282/417)));

				$(window).resize(function(){
					$('.item_box .pic').height(Math.floor($('.item_box .pic').width()*(282/417)));
				})

			}


			var st=0;
			
			var mySwiper = new Swiper('.pro_swiper',{
			    speed: 1000,
			    calculateHeight : true,
			    initialSlide :0,
		        onSlideChangeEnd: function(swiper){
		        	var id=$('.pro-swiper .swiper-slide').eq(mySwiper.activeIndex).attr('data-id');
		        	var _url='<?php echo site_url('ajax/ajax_pd'); ?>';
	              	$('.pd').load(_url,function(){
	              		update();
	              		sc();
	              	});
	            }
		    });
		    var list1 = new Swiper('.swiper_left .swiper-container',{
			    speed: 1000,
			    pagination : '.swiper_left .pagination',
			    paginationClickable: true,
			    nested:true,
			    onSlideChangeEnd:function(swiper){
			    	var n=swiper.activeIndex;
			    	$(swiper.container).parents('.swiper-slide').find('.choose_box ul li').eq(n).addClass('active').siblings().removeClass('active');
			    },
			    onInit:function(){
			    	$('.swiper_left .swiper-slide,.swiper_left .swiper-wrapper').height(Math.floor($('.swiper_left .swiper-slide').width()*(461/720)));	
			    	sc();
			    }
		    });

		    var list2 = new Swiper('.swiper_left2 .swiper-container',{
			    speed: 1000,
			    pagination : '.swiper_left2 .pagination',
			    paginationClickable: true,
			    nested:true,
			    onSlideChangeEnd:function(swiper){
			    	var n=swiper.activeIndex;
			    	console.log($(swiper.container))
			    	$(swiper.container).parents('.swiper-slide').find('.choose_box ul li').eq(n).addClass('active').siblings().removeClass('active');
			    },
			    onInit:function(){
			    	$('.swiper_left .swiper-slide,.swiper_left .swiper-wrapper').height(Math.floor($('.swiper_left .swiper-slide').width()*(461/720)));
			    }
		    });

			
			function sc(){
				$('.position_cen a').click(function(){
					var id=$(this).attr('data-id');
					$(this).addClass('active').siblings().removeClass('active');
					var id_box=$(id.substring(id.indexOf('#'),id.length));
					if(id == '#id1'){
						$('body,html').animate({
							'scrollTop':id_box.offset().top
						},800);
					}else{
						$('body,html').animate({
							'scrollTop':id_box.offset().top-$('.position').height()
						},800);
					}
					
					$(this).addClass('active').siblings('a').removeClass('active');
					return false;

				});

				st=$('.position').offset().top;
		    	$(window).scroll(function(){
					if($(window).scrollTop()>st-110){
						$('header').addClass('slide');
					}else{
						$('header').removeClass('slide');
					}

					if($(window).scrollTop()>st){
						$('.position').addClass('fix');
					}else{
						$('.position').removeClass('fix');
					}


					if($(window).scrollTop()>$('#id1').offset().top-$('header').height()){
						$('.position a').eq(0).addClass('active').siblings().removeClass('active');
					}

					if($(window).scrollTop()>$('#id2').offset().top-$('header').height()){
						$('.position a').eq(1).addClass('active').siblings().removeClass('active');
					}
				

			
					if($(window).scrollTop()>$('#id3').offset().top-$('header').height()){
						$('.position a').eq(2).addClass('active').siblings().removeClass('active');
					}
					
				});
			}
			

		    $('.detail_top .prev').click(function(){
		    	mySwiper.swipePrev(); 
		    });
		    $('.detail_top .next').click(function(){
		    	mySwiper.swipeNext(); 
		    });

		    $('.choose_box1 ul li').click(function(){
		    	var activeIndex=mySwiper.activeIndex;
		    	var index=$(this).index();
		    	$(this).addClass('active').siblings().removeClass('active');
		    	list1.swipeTo(index, 1000, false);
		    })
		    $('.choose_box2 ul li').click(function(){
		    	var activeIndex=mySwiper.activeIndex;
		    	var index=$(this).index();
		    	$(this).addClass('active').siblings().removeClass('active');
		    	list2.swipeTo(index, 1000, false);
		    })

		    $('.specifications ul li').click(function(){
		    	$(this).addClass('active').siblings().removeClass('active');
		    })

		})
	</script>
</body>
</html>


<script>
	$(function(){
		
		
		// 视频
		$(document).on('click','.links ul li',function(){
	    	$('.video_bg').addClass('active');
	    	$('.js-cont').addClass('active');

	    	$.ajax({
	    		url:'<?php echo site_url('ajax/ajax_video'); ?>',
	    		success:function(data){
	    			$('.js-cont').empty().append(data);
					$('.close').click(function(){
		    			$('.js-cont').empty().removeClass('active');
		    			$('.video_bg').removeClass('active');
		    		})
				}
	    	})
	    })
		
	})
</script>
